<template>
  <div class='todo-input container'>
    <div class="field is-grouped">
      <p class="control is-expanded">
        <input
          class="input"
          type="text"
          placeholder="请输入新待办事项"
          v-model.trim="inputValue"
          @keydown.enter="handleAdd"
          ref="inputRef"
        >
      </p>
      <p class="control">
        <a class="button is-primary" @click="handleAdd">
          添加
        </a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoInput',
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleAdd() {
      this.$refs.inputRef.focus()
      if (this.inputValue.length === 0) {
        return
      }
      this.$emit('add', this.inputValue)
      this.inputValue = ''
    }
  }
}
</script>

<style lang='scss' scoped>
  .todo-input {
    margin-top: 24px;
  }
</style>
